<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <!-- 1. 不支持和 <template> 元素上使用 -->
      <!-- <template v-show="type === 'A' || type === 'a'">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
      </template> -->
      <!-- 2. 不支持和 v-else 搭配使用 -->
      <!-- <div v-show="type.toLocaleUpperCase() === 'B'">B</div>
      <template v-else>Not B</template> -->
      <div v-show="!type">Not type</div>
      <div><input type="text" v-model="type" /></div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
      const { createApp, ref } = Vue;

      /*
        v-if 和 v-show 区别：
            v-if 有更高的切换开销
            v-show 可能有更高的初始渲染开销

        如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。
      */
      createApp({
        setup() {
          const type = ref("A");

          return {
            type,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
